<template>
  <div>
    <ul>
      <li v-for="(item, index) in glist" :key="index">
        {{ item.productName }}
      </li>
    </ul>
    <el-button type="primary" icon="el-icon-search">搜索</el-button>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="productName" label="产品名称" width="180">
      </el-table-column>
      <el-table-column prop="gmtCreate" label="发布时间" width="180">
      </el-table-column>
      <el-table-column prop="image" label="图片">
        <template scope="scope">
          <el-image style="width: 100px; height: 100px" :src="scope.row.image"></el-image>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      glist: [],
      tableData: [],
    };
  },
  created() {
    const url =
      "https://mock.mengxuegu.com/mock/642b7c6032affa39a121c870/example/goodslist#!method=get";
    axios
      .get(url, {
        params: { name: "tom" },
      })
      .then(
        // lambda表达式 箭头函数
        (res) => {
          console.info(res);
          this.glist = res.data.data.resultList;
          this.tableData = res.data.data.resultList;
        }
      )
      .catch((error) => {
        alert(error);
      });
  },
};
</script>